// import React from 'react';
// import Footer from '../../components/footer/footer';
// import '../Message/message.css'
// import { Tabs, List, Avatar, Card, Image } from 'antd';
// const { TabPane } = Tabs;
// const data = [
//   {
//     name: '岳云鹏',
//     title: 'Ant Design Title 1',
//     time: '2024/1/10'
//   },
//   {
//     name: '岳云鹏',
//     title: 'Ant Design Title 2',
//     time: '昨天',
//   },
//   {
//     name: '岳云鹏',
//     title: 'Ant Design Title 3',
//     time: '昨天',
//   },
//   {
//     name: '岳云鹏',
//     title: 'Ant Design Title 4',
//     time: '2024/1/10'
//   },
// ];
// const cardData = [
//   {
//     title: '小红',
//     message: '今天跑了10公里路了',
//     data: [
//       {
//         name: '岳云鹏',
//         title: 'Ant Design Title 1',
//       }
//     ]
//   },
//   {
//     title: '小红',
//     message: '今天跑了10公里路了',
//     data: [
//       {
//         name: '郭德纲',
//         title: 'Ant Design Title 1',
//       }
//     ]
//   },
//   {
//     title: '小红',
//     message: '今天跑了10公里路了',
//     data: [
//       {
//         name: '德云社',
//         title: 'Ant Design Title 1',
//       }
//     ]
//   },
//   {
//     title: '小红',
//     message: '今天跑了10公里路了',
//     data: [
//       {
//         name: '德云社',
//         title: 'Ant Design Title 1',
//       }
//     ]
//   },
//   {
//     title: '小红',
//     message: '今天跑了10公里路了',
//     data: [
//       {
//         name: '德云社',
//         title: 'Ant Design Title 1',
//       }
//     ]
//   }
// ]
// const items = [
//   {
//     key: '1',
//     label: 'Message',
//     children: <>
//       <List
//         style={{ margin: '10px',paddingRight:'20px' }}
//         bordered
//         dataSource={data}
//         renderItem={(item, index) => (
//           <List.Item>
//             <List.Item.Meta
//               avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
//               title={<><span>{item.name}</span></>}
//               description={<><span>{'哈哈哈哈'}</span></>}
//             />
//             <div>{item.time}</div>
//           </List.Item>
//         )}
//       />
//     </>,
//   },
//   {
//     key: '2',
//     label: 'Notification',
//     children: <>
//       {cardData.map((item, index) => (
//         <Card className='card'>
//           <List
//             style={{ margin: '10px' }}
//             bordered
//             dataSource={item.data}
//             renderItem={(items, index) => (
//               <List.Item>
//                 <List.Item.Meta
//                   avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
//                   title={<><span>{items.name}</span></>}
//                   description={<><span>{'2023-12-20'}</span></>}
//                 />
//               </List.Item>
//             )}
//           />
//           { }
//           <div className='footerMsee'>
//             <Image
//               width={40}
//               style={{ border: '1px solid #dadada' }}
//               src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
//             />
//             <div>
//               <div>{item.title}</div>
//               <div>{item.message}</div>
//             </div>
//           </div>
//         </Card>
//       )
//       )}
//     </>,
//   },
// ];
// function message() {
//   const onChange = (key) => {
//     console.log(key);
//   }
//   return (
//     <div className="message">
//       <div className='title'>Message</div>
//       <div className='messBody'>
//         <Tabs defaultActiveKey="1" items={items} onChange={onChange}>
//           {items.map((item) => (
//             <TabPane tab={item.label} key={item.key} >
//               <div style={{ height: 'calc(100vh - 50vh)', overflow: 'hidden', overflowY: 'auto' }}>
//                 {item.children}
//               </div>
//             </TabPane>
//           ))}
//         </Tabs>
//       </div>
//       <Footer />
//     </div>
//   );
// }

// export default message;
